<template>
  <div>

    <yd-ls-tab types="bill" :tourl="urls" :isactive="actives" label="病历|检查单|转换中">

      <span slot="zero">
        <yd-list theme="4" class="yd-ls-bill-list">
          <yd-list-item v-for="(items,index) in billCase"
                        :key="index"
                        type="link"
                        :href="{name: 'billcase', query: {cid:items.id,caseindex: caseIndex,casesize: caseSize}}">
            <span slot="title">
              <span>{{ items.rcdResult }}<i :class="{'yd-tabbar-dot': items.unread}"></i></span>
              <span>{{ items.rcdTime }}</span>
            </span>
            <yd-list-other slot="other">
              <div style="color:#505050;">{{ items.hospitalName }}</div>
            </yd-list-other>
            <yd-list-other slot="other" v-if="items.is_electron">
              <div style="padding-top: 5px;"><yd-icon color="#4870f3" name="feedback" size="0.28rem"></yd-icon>电子处方</div>
            </yd-list-other>
          </yd-list-item>
        </yd-list>
        <yd-ls-default v-if="!billCase.length">暂无病历数据</yd-ls-default>
        <yd-ls-more v-if="caseTotal > billCase.length" @click.native="loadmore('case')"></yd-ls-more>
      </span>

      <span slot="one">
        <yd-cell-group v-if="billCheck.length">
					<yd-cell-item
            class="yd-ls-bill-cell-item"
            v-for="(items,index) in billCheck"
            :key="index"
            type="link"
            :href="{name: 'billcheck',
            query: {title: items.name, chkid: items.chk_id, typeid: items.chk_type_id,checkIndex: checkIndex,checkSize: checkSize}}">
						<span slot="left">{{ items.name }}<i :class="{'yd-tabbar-dot': items.unread}"></i></span>
						<span slot="right">{{ items.last_time }}</span>
					</yd-cell-item>
				</yd-cell-group>
        <yd-ls-default v-if="!billCheck.length">暂无检查单数据</yd-ls-default>
        <yd-ls-more v-if="checkTotal > billCheck.length" @click.native="loadmore('check')"></yd-ls-more>
      </span>

      <span slot="two">
        <yd-cell-group v-if="billTurn.length">
					<yd-cell-item
            class="yd-ls-bill-cell-item"
            v-for="(items,index) in billTurn"
            :key="index"
            @click.native="billpic(items.date)">
						<span slot="left">{{ items.date }}<i :class="{'yd-tabbar-dot': items.unread}"></i></span>
						<span slot="right">{{ items.processingQty }}个转换中</span>
					</yd-cell-item>
				</yd-cell-group>
        <yd-ls-default v-if="!billTurn.length">暂无转换中数据</yd-ls-default>
        <yd-ls-more v-if="turnTotal > billTurn.length" @click.native="loadmore('turn')"></yd-ls-more>
      </span>
    </yd-ls-tab>

    <!--返回顶部-->
    <!-- <yd-backtop></yd-backtop> -->

  </div>
</template>

<script>
  import ydLsTab from '../../../components/yd-ls-tab.vue'
  import ydLsDefault from '../../../components/yd-ls-default.vue'
  import ydLsMore from '../../../components/yd-ls-more.vue'
  import api from '../../../axios/api'

  export default {
    name: 'bill',
    props: {},
    data() {
      return {
        urls: 'index.html#/home',
        dots: '',  // 0|1|2
        dots1: '0',
        dots2: '1',
        dots3: '2',
        billCase: [],
        billCheck: [],
        billTurn: [],
        billlist: [],
        actives: '',
        caseIndex: 1,
        caseSize: 13,
        caseTotal: 0,
        checkIndex: 1,
        checkSize: 13,
        checkTotal: 0,
        turnIndex: 1,
        turnSize: 13,
        turnTotal: 0
      }
    },
    created() {

      //TODO: 从公众号进时，检查openid
      if(this.$route.query.openid){
        localStorage.openId = this.$route.query.openid
        sessionStorage.isbillpic = this.$route.query.type // 从外面进来后，显示相对应的tab,顺序：0,1,2
      }

      // 从详情页返回后，默认激活相关tab
      this.actives = sessionStorage.isbillpic || ''

      //TODO:初始化数据
      this.caseIndex = 1
      this.checkIndex = 1
      this.turnIndex = 1
      let csize = this.$route.query.casesize
      let chksize = this.$route.query.checksize
      let tsize = this.$route.query.turnsize
      if(csize) this.caseSize = csize
      if(chksize) this.checkSize = chksize
      if(tsize) this.turnSize = tsize

      //TODO:初始化
      this.getBillCase()
      
    },
    methods: {
      init() {

      },
      getBillCase() {
        this.$dialog.loading.open(api.default_loading_txt);
        this.axios.get(api.bill_case_list,{ 
          params: {
            pageindex: this.caseIndex,
            pagesize: this.caseSize
            }})
            .then(m=>{
               // 病历列表
              let bill_case_data = m.data
              this.billCase = bill_case_data.data
              this.caseTotal = bill_case_data.pageinfo.total

              // 加载检查单
              this.getBillCheck()
            }).catch(err=>{
              this.$dialog.loading.close()
              this.$dialog.alert({mes: JSON.stringify(err)})
            })
      },
      getBillCheck() {
        this.axios.get(api.bill_check_list,{ 
          params: {
            pageindex: this.checkIndex, 
            pagesize: this.checkSize
            }})
            .then(m=>{
              // 检查单列表
              let bill_check_data = m.data
              this.billCheck = bill_check_data.data
              this.checkTotal = bill_check_data.pageinfo.total

              // 加载转换中
              this.getBillTurn()
            }).catch(err=>{
              this.$dialog.loading.close()
              this.$dialog.alert({mes: JSON.stringify(err)})
            })
      },
      getBillTurn() {
        this.axios.get(api.bill_turn_list,{
          params: {
            pageindex: this.turnIndex, 
            pagesize: this.turnSize
            }})
            .then(m=>{
              // 转换中列表
              let bill_turn_data = m.data
              this.billTurn = bill_turn_data.data
              this.turnTotal = bill_turn_data.pageinfo.total
              this.getBillTabUnread()
            }).catch(err=>{
              this.$dialog.loading.close()
              this.$dialog.alert({mes: JSON.stringify(err)})
            })
      },
      getBillList(api_type, types, pindex, psize) {
        this.$dialog.loading.open(api.default_loading_txt);
        this.axios.get(api_type, {params: {pageindex: pindex, pagesize: psize}})
          .then(m=>{
            let bill_data = m.data
            if(types === 'case'){
              this.billCase = this.billCase.concat(bill_data.data)
            }
            if(types === 'check'){
              this.billCheck = this.billCheck.concat(bill_data.data)
            }
            if(types === 'turn'){
              this.billTurn = this.billTurn.concat(bill_data.data)
            }
            this.$dialog.loading.close()

          }).catch(err=>{
              this.$dialog.loading.close()
              this.$dialog.alert({mes: JSON.stringify(err)})
            })
      },
      // 点击加载更多
      loadmore(type) {
        if(type === 'case'){
          this.caseIndex = this.caseIndex + 1
          this.getBillList(api.bill_case_list, type, this.caseIndex, this.caseSize)
        }
        if(type === 'check'){
          this.checkIndex = this.checkIndex + 1
          this.getBillList(api.bill_check_list, type, this.checkIndex, this.checkSize)
        }
        if(type === 'turn'){
          this.turnIndex = this.turnIndex + 1
          this.getBillList(api.bill_turn_list, type, this.turnIndex, this.turnSize)
        }
      },
      billpic (date) {
        sessionStorage.dates = date;
        sessionStorage.turnindex = this.turnIndex;
        sessionStorage.turnsize = this.turnSize;
        window.location.href = 'billpic.html'
      },
      getBillTabUnread() {
        this.axios.get(api.bill_tab_unread)
          .then(m=>{
            let bill_tab_unread_data = m.data
            this.$store.dispatch('fetchTabUnread', bill_tab_unread_data.data)
            this.$dialog.loading.close()
        }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      }
    },
    mounted() {
      this.init()
    },
    components: { ydLsTab, ydLsDefault, ydLsMore }


  }
</script>


<style>
  .yd-ls-bill-list .yd-list-img {
    display: none;
  }
  .yd-ls-bill-list.yd-list {
    padding: 0;
  }

  .yd-ls-bill-list.yd-list .yd-list-item {
    padding: 0.2rem 0.3rem;
    line-height: initial;
  }

  .yd-ls-bill-list.yd-list .yd-list-item .yd-list-img {
    width: 0.7rem;
    padding: 0.35rem 0;
    border-radius: 50%;
    margin-right: 0.2rem;
  }

  .yd-ls-bill-list.yd-list .yd-list-item .yd-list-title {
    line-height: .48rem;
    font-weight: 500;
    font-size: .3rem;
  }
  .yd-ls-bill-list.yd-list .yd-list-item .yd-list-mes .yd-list-other {
    padding-top: 0;
  }
  .yd-ls-bill-list.yd-list .yd-list-item .yd-list-title span span:first-child{
    position: relative;
  }
  .yd-ls-bill-list.yd-list .yd-list-item .yd-list-title span span:first-child .yd-tabbar-dot {
    margin-left: 0;
  }
  .yd-ls-bill-list.yd-list .yd-list-item .yd-list-title span span:last-child{
    float: right;
    font-size: 12px;
    color: #919191;
    font-weight: normal;
  }
  .yd-ls-bill-list.yd-list .yd-list-item .yd-list-other div{
    width: 4rem;
    font-size: 0.24rem;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
  }
  .yd-ls-bill-cell-item .yd-cell-left span:last-child {
    position: relative;
  }
  .yd-ls-bill-cell-item .yd-cell-left span:last-child .yd-tabbar-dot {
    margin-left: 0;
  }
</style>
